<template>
    <el-popover
        trigger="click"
        width="auto"
        transition="el-zoom-in-top"
        v-bind="$attrs"
    >
        <template #default>
            <div class="flex flex-col gap-15px max-h-400px overflow-auto">
                <el-input v-model="filterText" placeholder="搜索类型">
                    <template #suffix>
                        <i class="i-icon-park-outline-search text-22px "></i>
                    </template>
                </el-input>
                <div class="flex-1 min-h-0  overflow-auto">
                    <el-tree
                        ref="treeRef"
                        :data="treeData"
                        node-key="id"
                        highlight-current
                        default-expand-all
                        :props="{children: 'children',label: 'name'}"
                        :filter-node-method="filterNode"
                        @nodeClick="handleNodeClick"
                        v-bind="treeProps"
                    />
                </div>
            </div>
        </template>

        <template #reference>
            <slot></slot>
        </template>
    </el-popover>
</template>

<script setup>
import { ref, watch } from 'vue'

defineProps({
    show: {
        type: Boolean,
        default: false
    },
    treeProps: {
        type: Object
    }
})
const emits = defineEmits(['change'])

const filterText = ref('')

const treeRef = ref()

watch(filterText, val => {
    treeRef.value.filter(val)
})

const filterNode = (value, data) => {
    if (!value) return true
    return data.name.includes(value)
}

const treeData = ref([])

const handleNodeClick = node => {
    if (node.children) {
        return
    } else {
        emits('change', node)
    }
}

defineExpose({
    treeRef
})
</script>

<style lang="scss" scoped>

</style>